<template>
   <div class="footer">
       <ul class="flex-box">
           <li class="flex-1 current" @click.stop="goJump('index')" >首页</li>
           <li  class="flex-1" @click.stop="goJump('list')">列表</li>
           <li  class="flex-1" @click.stop="goJump('myManage')">我的</li>
       </ul>
   </div>
</template>

<script>
    export default {
        name: 'footer',
        methods: {
            goJump(name) {
                if(name)  {
                    this.$router.push({name});
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .footer {
        position: fixed;
        left:0;
        bottom: 0;
        z-index: 100;
        width:100%;
        height: 4rem;
        line-height: 4rem;
        background-color: #cccccc;
        li {
            text-align: center;
            color: @text-color-fff;
            &.current{
                background-color: #84D3F1;
            }
        }

    }
</style>
